<template>
  <el-form ref="form" :rules="rules" :model="formEvent.form" label-width="120px" :size="size">
    <el-row :gutter="16">
      <!-- 通过调整lg的大�?  12 24/3=12 会变为一�?3�? -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="单位" prop="ywdwbm">
          <el-select v-model="formEvent.form.ywdwbm" @change="onchange_ywdw">
            <el-option
              v-for="item in OptionData.OptionData_gldw"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="能源站名称" prop="jfName">
          <el-input v-model="formEvent.form.jfName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form-item label="地址" style="width: 49%;">
          <el-input v-model="formEvent.form.address"></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="创建人">
          <el-input v-model="formEvent.form.createPeople" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="创建时间">
          <el-input v-model="formEvent.form.createTime" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form-item class="tool-button-container">
          <el-button
            @click="closeEvent()"
            :size="size"
            icon="fa fa-minus-square-o"
          >
            取消
          </el-button
          >
          <el-button
            type="primary"
            @click="submitEvent()"
            :size="size"
            icon="fa fa-save (alias)"
          >
            确定
          </el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {FormEvent} from "../model/computerRoomManagement-form.js";
import {GridEvent} from '../model/computerRoomManagement-table.js';
import {reactive} from "vue";
import {getInfo} from "@/api/login";
import {parseTime} from "@/utils/ruoyi";

export default {
  name: "computerRoomManagementForm",
  props: {
    formData: {
      type: Object,
    },
  },
  data() {
    return {
      size: "small",
      formEvent: reactive(FormEvent),
      rules: reactive(FormEvent).rules,
      OptionData: {
        OptionData_gldw: GridEvent.OptionData_gldw
      },
    };
  },
  mounted() {
    this.formEvent.initFormData(this.formData);
    if (this.formEvent.type === 'insert') {
      getInfo().then(res => {
        this.formEvent.form.createPeople = res.user.nickName
        this.formEvent.form.createTime = parseTime(new Date())
      })
    }
  },
  methods: {
    closeEvent() {
      //关闭窗口事件,不刷�?//
      this.$emit("closeEvent", false);
    },
    submitEvent() {
      //关闭窗口事件,刷新表格数据//
      this.formEvent
        .saveFormData()
        .then((res) => {
          this.$emit("closeEvent", true);
          this.$message.success("保存成功!");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    onchange_ywdw(val) {
      this.formEvent.form.ywdwmc = ''
      if (val) {
        let arr = this.OptionData.OptionData_gldw.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.formEvent.form.ywdwmc = arr[0].label;
        }
      }
    }

  },
};
</script>

<style scoped>
.tool-button-container {
  text-align: right;
}

.el-select {
  width: 100% !important
}
</style>
